import { Drawer, Image } from 'antd';
import { useEffect, useState } from 'react';
import { getActivityDetail } from '../service';
import styles from '../style.less';
import type { DetailItem } from '../types';
interface ParkProps {
  id: string;
  visible: boolean;
  onClose: () => void;
}

export default (props: ParkProps) => {
  const { visible, onClose, id } = props;
  const [activityDetails, setActivityDetails] = useState<DetailItem>();

  useEffect(() => {
    getActivityDetail(id).then((res) => {
      setActivityDetails(res.data);
    });
  }, [id]);

  return (
    <Drawer
      title="活动详情"
      placement="right"
      font-size={'50rem'}
      width={'30vw'}
      onClose={() => {
        onClose();
      }}
      visible={visible}
    >
      {activityDetails ? (
        <div className={styles.DrawerDetails}>
          <p>活动中心:{activityDetails?.name}</p>
          <p>活动地址:{activityDetails?.links}</p>
          <p>图片:</p> <Image width="21vw" src={activityDetails?.picture} />
        </div>
      ) : (
        '无详情数据或数据正在加载'
      )}
    </Drawer>
  );
};
